<template>
  <div class="app-container calendar-list-container">
    <BasicContainer>
      <ElTabs v-model="activeName" @tab-click="handleClick">
        <ElTabPane label="用户信息" name="first">
          <ElRow>
            <ElForm ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
              <ElCol :span="12">
                <div class="grid-content bg-purple">
                  <ElFormItem label="头像">
                    <ElUpload
                      :headers="headers"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      class="avatar-uploader"
                      action="/admin/sys-file/upload">
                      <img v-if="ruleForm.avatar" :src="avatarUrl" class="avatar" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </ElUpload>
                  </ElFormItem>
                  <ElFormItem label="用户名" prop="username">
                    <ElInput v-model="ruleForm.username" type="text" disabled />
                  </ElFormItem>
                  <ElFormItem label="手机号" prop="phone">
                    <ElInput v-model="ruleForm.phone" placeholder="验证码登录使用" />
                  </ElFormItem>
                  <ElFormItem label="原密码" prop="password">
                    <ElInput v-model="ruleForm.password" type="password" auto-complete="off" />
                  </ElFormItem>
                  <ElFormItem label="新密码" prop="newpassword1">
                    <ElInput v-model="ruleForm.newpassword1" type="password" auto-complete="off" />
                  </ElFormItem>
                  <ElFormItem label="确认密码" prop="newpassword2">
                    <ElInput v-model="ruleForm.newpassword2" type="password" auto-complete="off" />
                  </ElFormItem>
                </div>
              </ElCol>
            </ElForm>
          </ElRow>
        </ElTabPane>
        <ElTabPane label="用户详细信息" name="second">
          <!--            <ElForm :model="userDetail" :rules="userDetailRule" ref="userDetail" @keyup.enter.native="dataFormSubmit()" label-width="120px">-->
          <!--              <ElRow :gutter="10">-->
          <!--                <ElCol :span="8">-->
          <!--                  <ElFormItem label="人员编号" prop="personNumber">-->
          <!--                    <ElInput v-model="dataForm.personNumber" placeholder="人员编号"/>-->
          <!--                  </ElFormItem>-->
          <!--                </ElCol>-->
          <!--                <ElCol :span="8">-->
          <!--                  <ElFormItem label="登录名称" prop="loginname">-->
          <!--                    <ElInput :disabled="loginNameDisable"-->
          <!--                             v-model="dataForm.loginname"-->
          <!--                             @focus="showSelectUser"-->
          <!--                             placeholder="用户名称"/>-->
          <!--                  </ElFormItem>-->
          <!--                </ElCol>-->
          <!--                <ElCol :span="8">-->
          <!--                  <ElFormItem label="姓名" prop="name">-->
          <!--                    <ElInput v-model="dataForm.name" placeholder="姓名"/>-->
          <!--                  </ElFormItem>-->
          <!--                </ElCol>-->
          <!--              </ElRow>-->
          <!--              <ElRow :gutter="10">-->
          <!--                <ElCol :span="8">-->
          <!--                  <ElFormItem label="身份证号码" prop="idNumber">-->
          <!--                    <ElInput v-model="dataForm.idNumber" placeholder="身份证号码"/>-->
          <!--                  </ElFormItem>-->
          <!--                </ElCol>-->
          <!--                <ElCol :span="8">-->
          <!--                  <ElFormItem label="籍贯" prop="nativePlace">-->
          <!--                    <ElInput v-model="dataForm.nativePlace" placeholder="籍贯"/>-->
          <!--                  </ElFormItem>-->
          <!--                </ElCol>-->
          <!--                <ElCol :span="8">-->
          <!--                  <ElFormItem label="出生日期" prop="birthday">-->
          <!--                    <ElDatePicker v-model="dataForm.birthday" type="date"  placeholder="出生日期"/>-->
          <!--                  </ElFormItem>-->
          <!--                </ElCol>-->
          <!--              </ElRow>-->
          <!--              <ElRow :gutter="10">-->
          <!--                <ElCol :span="16">-->
          <!--                  <ElFormItem label="户口所在地" prop="hukou">-->
          <!--                    <ElInput v-model="dataForm.hukou" placeholder="户口所在地"/>-->
          <!--                  </ElFormItem>-->
          <!--                </ElCol>-->
          <!--                <ElCol :span="8">-->
          <!--                  <ElFormItem label="婚姻状况" prop="maritalStatus">-->
          <!--                    &lt;!&ndash;              <ElInput v-model="dataForm.maritalStatus" placeholder="婚姻状况"/>&ndash;&gt;-->
          <!--                    <VueTreeSelect v-model="dataForm.maritalStatus" :options="maritalStatusOption" :normalizer="normalizer" placeholder="婚姻状况"/>-->
          <!--                  </ElFormItem>-->
          <!--                </ElCol>-->
          <!--              </ElRow>-->
          <!--              <ElRow :gutter="10">-->
          <!--                <ElCol :span="8">-->
          <!--                  <ElFormItem label="性别" prop="gender">-->
          <!--                    <ElRadio v-model="dataForm.gender" label="0" border>女</ElRadio>-->
          <!--                    <ElRadio v-model="dataForm.gender" label="1" border>男</ElRadio>-->
          <!--                    <ElRadio v-model="dataForm.gender" label="2" border>其他</ElRadio>-->
          <!--                  </ElFormItem>-->
          <!--                </ElCol>-->
          <!--                <ElCol :span="8">-->
          <!--                  <ElFormItem label="民族" prop="nation">-->
          <!--                    &lt;!&ndash;              <ElInput v-model="dataForm.nation" placeholder="民族"/>&ndash;&gt;-->
          <!--                    <VueTreeSelect v-model="dataForm.nation" :options="nationOption" :normalizer="normalizer" placeholder="民族"/>-->
          <!--                  </ElFormItem>-->
          <!--                </ElCol>-->
          <!--                <ElCol :span="8">-->
          <!--                  <ElFormItem label="出生地" prop="birthplace">-->
          <!--                    <ElInput v-model="dataForm.birthplace" placeholder="出生地"/>-->
          <!--                  </ElFormItem>-->
          <!--                </ElCol>-->
          <!--              </ElRow>-->
          <!--              <ElRow :gutter="10">-->
          <!--                <ElCol :span="8">-->
          <!--                  <ElFormItem label="参加工作时间" prop="workdate">-->
          <!--                    <ElDatePicker-->
          <!--                      v-model="dataForm.workdate"-->
          <!--                      value-format="yyyy-MM-dd"-->
          <!--                      type="date"-->
          <!--                      placeholder="参加工作时间"/>-->
          <!--                  </ElFormItem>-->
          <!--                </ElCol>-->
          <!--                <ElCol :span="8">-->
          <!--                  <ElFormItem label="健康状况" prop="health">-->
          <!--                    &lt;!&ndash;              <ElInput v-model="dataForm.health" placeholder="健康状况"/>&ndash;&gt;-->
          <!--                    <VueTreeSelect v-model="dataForm.health" :options="healthOption" :normalizer="normalizer" placeholder="健康状况"/>-->
          <!--                  </ElFormItem>-->
          <!--                </ElCol>-->
          <!--                <ElCol :span="8">-->
          <!--                  <ElFormItem label="最高学历" prop="degree">-->
          <!--                    &lt;!&ndash;              <ElInput v-model="dataForm.degree" placeholder="最高学历"/>&ndash;&gt;-->
          <!--                    <VueTreeSelect v-model="dataForm.degree" :options="degreeOption" :normalizer="normalizer" placeholder="最高学历"/>-->
          <!--                  </ElFormItem>-->
          <!--                </ElCol>-->
          <!--              </ElRow>-->
          <!--              <ElRow :gutter="10">-->
          <!--                <ElCol :span="8">-->
          <!--                  <ElFormItem label="人员状态" prop="status">-->
          <!--                    &lt;!&ndash;              <ElInput v-model="dataForm.status" placeholder="人员状态"/>&ndash;&gt;-->
          <!--                    <VueTreeSelect v-model="dataForm.status" :options="statusOption" :normalizer="normalizer" placeholder="人员状态"/>-->
          <!--                  </ElFormItem>-->
          <!--                </ElCol>-->
          <!--                <ElCol :span="8">-->
          <!--                  <ElFormItem label="人员类型" prop="type">-->
          <!--                    &lt;!&ndash;              <ElInput v-model="dataForm.type" placeholder="人员类型"/>&ndash;&gt;-->
          <!--                    <VueTreeSelect v-model="dataForm.type" :options="typeOption" :normalizer="normalizer" placeholder="人员类型"/>-->
          <!--                  </ElFormItem>-->
          <!--                </ElCol>-->
          <!--                <ElCol :span="8">-->
          <!--                  <ElFormItem label="电话号码" prop="telephone">-->
          <!--                    <ElInput v-model="dataForm.telephone" placeholder="电话号码"/>-->
          <!--                  </ElFormItem>-->
          <!--                </ElCol>-->
          <!--              </ElRow>-->
          <!--              <ElRow :gutter="10">-->
          <!--                <ElCol :span="8">-->
          <!--                  <ElFormItem label="手机号码" prop="mobile">-->
          <!--                    <ElInput v-model="dataForm.mobile" placeholder="手机号码"/>-->
          <!--                  </ElFormItem>-->
          <!--                </ElCol>-->
          <!--                <ElCol :span="8">-->
          <!--                  <ElFormItem label="职    务" prop="post">-->
          <!--                    &lt;!&ndash;              <ElInput v-model="dataForm.post" placeholder="职    务"/>&ndash;&gt;-->
          <!--                    <VueTreeSelect v-model="dataForm.post" :options="postOption" :normalizer="normalizer" placeholder="职    务"/>-->
          <!--                  </ElFormItem>-->
          <!--                </ElCol>-->
          <!--                <ElCol :span="8">-->
          <!--                  <ElFormItem label="入职本单位时间" prop="enterdeptDate">-->
          <!--                    <ElDatePicker-->
          <!--                      v-model="dataForm.enterdeptDate"-->
          <!--                      type="date"-->
          <!--                      value-format="yyyy-MM-dd"-->
          <!--                      placeholder="入职本单位时间"/>-->
          <!--                  </ElFormItem>-->
          <!--                </ElCol>-->
          <!--              </ElRow>-->
          <!--              <ElRow>-->
          <!--                <ElCol>-->
          <!--                  <ElFormItem label="退休时间" prop="retireDate">-->
          <!--                    <ElDatePicker-->
          <!--                      v-model="dataForm.retireDate"-->
          <!--                      type="date"-->
          <!--                      value-format="yyyy-MM-dd"-->
          <!--                      placeholder="退休时间"/>-->
          <!--                  </ElFormItem>-->
          <!--                </ElCol>-->
          <!--              </ElRow>-->
          <!--            </ElForm>-->
        </ElTabPane>
        <ElTabPane label="家庭成员信息" name="third" />
        <ElTabPane label="政治面貌信息" name="fourth" />
        <ElTabPane label="学历学位信息" name="fifth" />
        <ElTabPane label="个人简历信息" name="sixth" />
      </ElTabs>
      <ElRow>
        <ElButton type="primary" @click="submitForm()">提交</ElButton>
        <ElButton @click="resetForm()">重置</ElButton>
      </ElRow>
    </BasicContainer>
  </div>
</template>

<script>
  import { getDataURL } from '@/util'
  import { mapState } from 'vuex'
  import { getStore } from '@/util/store'
  import { isValidateNoneMobile } from '@/util/validate'
  import { editInfo } from '@/api/admin/user'
  import { getObj } from '@/api/admin/userinfo'
  import { getToken } from '@/util/auth'
  import { transparentImage } from '@/const'
  import { getDictData } from '@/util/dictionary'

  export default {
    data() {
      const validatePhone = (rule, value, callback) => {
        if (isValidateNoneMobile(value)[0]) {
          callback(new Error(isValidateNoneMobile(value)[1]))
        } else {
          callback()
        }
      }
      const validatePass = (rule, value, callback) => {
        if (this.ruleForm.password !== '') {
          if (value !== this.ruleForm.newpassword1) {
            callback(new Error('两次输入密码不一致!'))
          } else {
            callback()
          }
        } else {
          callback()
        }
      }
      return {
        avatarUrl: transparentImage,
        headers: {
          Authorization: `Bearer ${getToken()}`
        },
        ruleForm: {
          username: '',
          password: '',
          newpassword1: '',
          newpassword2: '',
          avatar: '',
          phone: ''
        },
        rules: {
          phone: [{ required: false, validator: validatePhone, trigger: 'blur' }],
          password: [
            {
              required: true,
              min: 6,
              message: '原密码不少于6位',
              trigger: 'blur'
            }
          ],
          newpassword1: [
            {
              required: false,
              min: 6,
              message: '新密码不少于6位',
              trigger: 'blur'
            }
          ],
          newpassword2: [{ required: false, validator: validatePass, trigger: 'blur' }]
        },
        // 选项卡默认选中第一个
        activeName: 'first',
        userDetail: {
          id: -1,
          userId: '',
          personNumber: '',
          loginname: '',
          name: '',
          birthday: '',
          nativePlace: '',
          gender: '2',
          hukou: '',
          enterdeptDate: '',
          maritalStatus: '未婚',
          idNumber: '',
          nation: '汉族',
          birthplace: '',
          workdate: '',
          health: '健康',
          degree: '本科毕业生',
          status: '在岗',
          type: '正式',
          telephone: '',
          mobile: '',
          post: '职工',
          retireDate: ''
        }
      }
    },
    computed: {
      ...mapState('user', ['sysUser'])
    },
    created() {
      this.resetForm()
      // this.resetUserDetailForm()
    },
    methods: {
      submitForm() {
        this.$refs.ruleForm.validate(valid => {
          if (!valid) {
            return false
          }
          editInfo(this.ruleForm).then(response => {
            this.$notify.success('修改成功')
            // 修改后注销当前token,重新登录
            this.$store.dispatch('user/handleLogout').then(() => {
              location.reload()
            })
          })
        })
      },
      async resetForm() {
        this.ruleForm.password = undefined
        this.ruleForm.newpassword1 = undefined
        this.ruleForm.newpassword2 = undefined
        this.ruleForm.username = this.sysUser.username
        this.ruleForm.phone = this.sysUser.phone
        this.ruleForm.avatar = this.sysUser.avatar
        this.avatarUrl = await getDataURL(this.sysUser.avatar)
        // 判断是否选择了租户ID
        const TENANT_ID = getStore('tenantId')
        if (TENANT_ID) {
          this.headers['TENANT-ID'] = TENANT_ID // 租户ID
        }
      },
      resetUserDetailForm() {
        // 获取婚姻状况选项信息
        this.getMaritalStatus()
        // 获取名族选项信息
        this.getNation()
        // 获取健康选项信息
        this.getHealth()
        // 获取最高学历选项信息
        this.getDegree()
        // 获取人员状态选项信息
        this.getStatus()
        // 获取人员类型选项信息
        this.getType()
        // 获取职务选项信息
        this.getPost()
        this.$nextTick(() => {
          this.$refs.userDetail.resetFields()
          if (this.userDetail.id !== -1) {
            getObj(this.dataForm.id).then(response => {
              this.dataForm = response.data.data
            })
            this.loginNameDisable = true
          }
          // this.$refs.edu.userInit(this.dataForm.id)
          // this.$refs.family.userInit(this.dataForm.id)
          // this.$refs.resume.userInit(this.dataForm.id)
          // this.$refs.political.userInit(this.dataForm.id)
        })
      },
      handleAvatarSuccess(res, file) {
        this.avatarUrl = URL.createObjectURL(file.raw)
        this.ruleForm.avatar = res.data.url
      },
      getMaritalStatus() {
        getDictData('婚姻状况').then(response => {
          this.maritalStatusOption = response
        })
      },
      getNation() {
        getDictData('民族').then(response => {
          this.nationOption = response
        })
      },
      getHealth() {
        getDictData('健康状况').then(response => {
          this.healthOption = response
        })
      },
      getDegree() {
        getDictData('最高学历').then(response => {
          this.degreeOption = response
        })
      },
      getStatus() {
        getDictData('人员状态').then(response => {
          this.statusOption = response
        })
      },
      getType() {
        getDictData('人员类型').then(response => {
          this.typeOption = response
        })
      },
      getPost() {
        getDictData('职务').then(response => {
          this.postOption = response
        })
      },
      /** 转换菜单数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children
        }

        return {
          id: node.value,
          label: node.label,
          children: node.children
        }
      }
    }
  }
</script>

<style lang="scss">
  @import '@/assets/styles/info';
</style>
